/**
 * 响应式底部导航栏样式
 * 解决移动端底部导航栏字体和图标显示过小的问题
 */

/* 基础响应式设置 */
@media screen and (max-width: 768px) {
  /* 底部导航栏整体高度调整 */
  .cu-bar.tabbar {
    height: calc(120upx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }

  .cu-tabbar-height {
    min-height: 120upx;
    height: calc(120upx + env(safe-area-inset-bottom) / 2);
  }

  /* 导航项文字大小调整 */
  .cu-bar.tabbar .action {
    font-size: 26upx; /* 从22upx增加到26upx */
    padding: 10upx 0;
  }

  /* 图标大小调整 */
  .cu-bar.tabbar .action [class*="cuIcon-"] {
    font-size: 48upx; /* 从40upx增加到48upx */
    margin: 0 auto 8upx;
  }

  /* 图片图标大小调整 */
  .cu-bar.tabbar .action .cuIcon-cu-image image {
    width: 40upx; /* 从50upx调整到40upx，保持比例 */
    height: 40upx;
  }

  /* 特殊按钮图标大小 */
  .cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
    font-size: 60upx; /* 从50upx增加到60upx */
    width: 80upx; /* 从70upx增加到80upx */
    height: 80upx;
    line-height: 80upx;
    top: -40upx; /* 从-35upx调整到-40upx */
  }

  /* 特殊按钮背景大小 */
  .cu-bar.tabbar .action.add-action::after {
    width: 120upx; /* 从100upx增加到120upx */
    height: 120upx; /* 从100upx增加到120upx */
    top: -60upx; /* 从-50upx调整到-60upx */
  }

  .cu-bar.tabbar .action.add-action::before {
    width: 120upx; /* 从100upx增加到120upx */
    height: 36upx; /* 从30upx调整到36upx */
    bottom: 36upx; /* 从30upx调整到36upx */
  }
}

/* 小屏幕设备额外优化 */
@media screen and (max-width: 375px) {
  .cu-bar.tabbar .action {
    font-size: 24upx; /* 在小屏幕上稍微减小字体 */
  }
  
  .cu-bar.tabbar .action [class*="cuIcon-"] {
    font-size: 44upx; /* 在小屏幕上稍微减小图标 */
  }
}

/* 大屏幕设备优化 */
@media screen and (min-width: 769px) {
  .cu-bar.tabbar .action {
    font-size: 28upx; /* 在大屏幕上使用更大的字体 */
  }
  
  .cu-bar.tabbar .action [class*="cuIcon-"] {
    font-size: 52upx; /* 在大屏幕上使用更大的图标 */
  }
}

/* 高分辨率屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) {
  .cu-bar.tabbar .action {
    font-size: 28upx;
  }
  
  .cu-bar.tabbar .action [class*="cuIcon-"] {
    font-size: 50upx;
  }
}

/* 横屏模式优化 */
@media screen and (orientation: landscape) and (max-width: 896px) {
  .cu-bar.tabbar {
    height: calc(100upx + env(safe-area-inset-bottom) / 2);
  }
  
  .cu-tabbar-height {
    min-height: 100upx;
    height: calc(100upx + env(safe-area-inset-bottom) / 2);
  }
  
  .cu-bar.tabbar .action {
    font-size: 24upx;
    padding: 8upx 0;
  }
  
  .cu-bar.tabbar .action [class*="cuIcon-"] {
    font-size: 42upx;
    margin: 0 auto 6upx;
  }
}

/* 安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cu-bar.tabbar {
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .cu-bar.tabbar {
    background-color: #1a1a1a;
  }
  
  .cu-bar.tabbar .action {
    color: #cccccc;
  }
  
  .cu-bar.tabbar .action.text-blue {
    color: #4ca2ff;
  }
}